<template>
  <div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="商品封面图">
        <el-upload
          class="avatar-uploader"
          :action="host"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="ruleForm.goodsImage"
            :src="dialogFormAvatarFullUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品展示图">
        <el-upload
          :action="host"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handlePicture"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品名称" prop="GoodsName">
        <el-input
          type="text"
          v-model="ruleForm.GoodsName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品描述" prop="GoodsDesc">
        <el-input
          type="text"
          v-model="ruleForm.GoodsDesc"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="一级分类" prop="FromGoodsCategory1Name">
        <el-select
          v-model="ruleForm.FromGoodsCategory1Name"
          placeholder="请选择"
          @change="change"
        >
          <el-option v-for="item in options" :key="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" prop="FromGoodsCategory2Name">
        <el-select
          v-model="ruleForm.FromGoodsCategory2Name"
          placeholder="请选择"
          @change="change2"
        >
          <el-option
            v-for="item in options2"
            :key="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类" prop="FromGoodsCategory3Name">
        <el-select v-model="ruleForm.FromGoodsCategory3Name" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品店铺" prop="FromShopsName">
        <el-input
          type="text"
          v-model="ruleForm.FromShopsName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品品牌" prop="FromGoodsBrandsName">
        <el-input
          type="text"
          v-model="ruleForm.FromGoodsBrandsName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="供应商" prop="FromSupplierName">
        <el-input
          type="text"
          v-model="ruleForm.FromSupplierName"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品库存" prop="GoodsStock">
        <el-input
          type="number"
          v-model="ruleForm.GoodsStock"
          autocomplete="off"
          min="0"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="Price">
        <el-input
          type="number"
          v-model="ruleForm.Price"
          autocomplete="off"
          min="0"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addGoods } from "../api/goods";
import { GetCategory1, GetCategory2,GetCategory3 } from "../api/category";

export default {
  data() {
    return {
      //商品图片处理路径
      host: this.$host + `Images/avatar`,
      //图片保存路径
      dialogFormAvatarFullUrl: "",

      //商品展示图上传
      dialogImageUrl: "",
      dialogVisible: false,

      //一级分类选择框的值
      options: [],
      //二级分类选择框的值
      options2: [],
      //三级分类选择框的值
      options3: [],

      ruleForm: {
        GoodsName: "",
        FromShopsName: "",
        FromGoodsBrandsName: "",
        FromSupplierName: "",
        GoodsStock: "",
        Price: "",
        GoodsDesc: "",
        goodsImage: "",
        image: [],
        FromGoodsCategory1Name: "",
        FromGoodsCategory2Name: "",
        FromGoodsCategory3Name: "",
      },
      rules: {
        GoodsName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
        ],
        FromShopsName: [
          { required: true, message: "请输入商品店铺名称", trigger: "blur" },
        ],
        FromGoodsBrandsName: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
        ],
        FromSupplierName: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
        ],
        GoodsStock: [
          { required: true, message: "请输入库存数量", trigger: "blur" },
        ],
        Price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        GoodsDesc: [
          { required: true, message: "请输入商品描述", trigger: "blur" },
        ],
        FromGoodsCategory1Name: [
          { required: true, message: "请选择分类", trigger: "blur" },
        ],
        FromGoodsCategory2Name: [
          { required: true, message: "请选择分类", trigger: "blur" },
        ],
        FromGoodsCategory3Name: [
          { required: true, message: "请选择分类", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 封面头像上传成功后的处理
    handleAvatarSuccess(res, file) {
      // 保存相对路径
      let prePath = res.filesPath;
      this.ruleForm.goodsImage = prePath;

      // 显示使用完整路径
      let fullPath = URL.createObjectURL(file.raw);
      this.dialogFormAvatarFullUrl = fullPath;
    },
    // 展示头像上传成功后的处理
    handlePicture(res) {
      // 保存相对路径
      let prePath = res.filesPath;
      this.ruleForm.image.push(prePath);
      console.log(this.ruleForm.image);

      // 显示使用完整路径
      // let fullPath = URL.createObjectURL(file.raw);
      // this.dialogFormAvatarFullUrl = fullPath;
    },

    //放大图片的方法
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除图片的方法
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addGoods(this.ruleForm).then((data) => {

              if(data.data.code ==1000){
                  this.$router.push("/GoodsRegulate/GoodsList")
              }else{
                this.$message({type:"error",message:data.data.msg});
              }
        });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //加载一级分类数据
    fetchData() {
      GetCategory1().then((data) => {
        data.data.data.forEach((item) => {
          this.options.push(item.categoryName);
        });
      });
    },
    //选择完一级分类后，获取二级分类数据
    change() {
      GetCategory2(this.ruleForm).then((data) => {
        this.ruleForm.FromGoodsCategory2Name = "",
        this.ruleForm.FromGoodsCategory3Name = "",
        this.options2 = [];
        data.data.data.forEach(item =>{
          this.options2.push(item.categoryName);
        })
      });
    },
    //选择完二级分类后，获取三级分类数据
    change2() {
      GetCategory3(this.ruleForm).then((data) => {
        this.ruleForm.FromGoodsCategory3Name = "",
        this.options3 = [];
        data.data.data.forEach(item =>{
          this.options3.push(item.categoryName);
        })
      });
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style scoped>
.el-input__inner {
  width: 500px;
}
.demo-ruleForm {
  width: 60%;
  margin: auto;
}

/* 这下面是图片的样式，虽然我不知道是什么，但是用就对了 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>